@import '../../bootstrap-extended/include'; // Bootstrap includes
@import '../../components/include'; // Components includes

.jstree > .jstree-container-ul .jstree-loading > .jstree-ocl,
.jstree > .jstree-container-ul .jstree-loading > .jstree-ocl,
.jstree > .jstree-container-ul .jstree-loading > .jstree-ocl {
  background-image: url('');
}

.jstree .jstree-node,
.jstree .jstree-icon,
.jstree .jstree-file,
.jstree .jstree-folder,
#jstree-dnd.jstree .jstree-ok,
#jstree-dnd.jstree .jstree-er,
.jstree-small .jstree-node,
.jstree-small .jstree-icon,
.jstree-small .jstree-file,
.jstree-small .jstree-folder,
#jstree-dnd.jstree-small .jstree-ok,
#jstree-dnd.jstree-small .jstree-er,
.jstree-large .jstree-node,
.jstree-large .jstree-icon,
.jstree-large .jstree-file,
.jstree-large .jstree-folder,
#jstree-dnd.jstree-large .jstree-ok,
#jstree-dnd.jstree-large .jstree-er {
  background-image: url('');
}

@media (max-width: 768px) {
  #jstree-dnd.jstree-dnd-responsive > .jstree-ok,
  #jstree-dnd.jstree-dnd-responsive > .jstree-er,
  .jstree-responsive .jstree-icon,
  .jstree-responsive .jstree-node,
  .jstree-responsive .jstree-icon,
  .jstree-responsive .jstree-node > .jstree-ocl,
  .jstree-responsive .jstree-themeicon,
  .jstree-responsive .jstree-checkbox,
  .jstree-responsive .jstree-file,
  .jstree-responsive .jstree-folder {
    background-image: url('');
  }
}

.jstree .jstree-last,
.jstree > .jstree-no-dots .jstree-node,
.jstree > .jstree-no-dots .jstree-leaf > .jstree-ocl,
.jstree .jstree-disabled,
.jstree .jstree-themeicon-custom:not(.jstree-file):not(.jstree-folder) {
  background: transparent !important;
}

// Light Layout
.jstree {
  .jstree-container-ul {
    .jstree-anchor {
      color: $body-color;
      &.jstree-clicked,
      &.jstree-hovered {
        background: transparent;
        box-shadow: none;
      }
    }
    .jstree-node {
      .jstree-wholerow-clicked {
        background: rgba($color: $primary, $alpha: 0.1);
      }
      .jstree-wholerow-hovered:not(.jstree-wholerow-clicked) {
        background: transparent;
      }
    }
  }
}

// Context Menu Styling
.vakata-context.jstree-contextmenu {
  background: $white;
  border: 0;
  box-shadow: 0px 0px 50px 0px rgba($black, 0.1);
  li {
    a {
      color: $body-color;
      padding: 0 1.5rem;
      text-shadow: none;
      i {
        display: none;
      }
    }
    &.vakata-context-hover > a {
      background-color: $body-bg;
      box-shadow: none;
    }
    &.vakata-context-separator {
      a {
        margin: 0;
        border-color: $border-color;
      }
    }
    &.vakata-contextmenu-disabled {
      a {
        color: $text-muted;
      }
      &.vakata-context-hover a {
        background-color: transparent !important;
        cursor: default;
      }
    }
    ul {
      background: $white;
      border: 0;
      box-shadow: 0px 0px 50px 0px rgba($black, 0.1);
    }
  }
  .vakata-contextmenu-sep {
    display: none;
  }
}

// Dark Layout
.dark-layout {
  // Folder Icons and text colors
  .jstree {
    .jstree-container-ul {
      .jstree-anchor {
        color: $theme-dark-body-color;
      }
    }
  }

  // Context Menu Styling
  .vakata-context.jstree-contextmenu {
    background: $theme-dark-card-bg;
    box-shadow: $theme-dark-box-shadow;
    li {
      a {
        color: $theme-dark-body-color;
      }
      &.vakata-context-hover > a {
        background-color: $theme-dark-body-bg;
      }
      &.vakata-context-separator a {
        border-color: $theme-dark-border-color;
      }
      &.vakata-contextmenu-disabled a {
        color: $theme-dark-text-muted-color;
      }
      ul {
        background: $theme-dark-card-bg;
        box-shadow: $theme-dark-box-shadow;
      }
    }
  }
}
